<template>
  <div>
    <el-form ref="myform" :model="formItem" :rules="rules" label-width="100px" size="mini">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="资产卡片" prop="card">
            <el-input v-model="formItem.card" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产名称" prop="name">
            <el-input v-model="formItem.name" placeholder="请输入资产名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产分类" prop="assetTypeCode">
            <treeselect
              v-model="formItem.smallTypeCode"
              :multiple="false"
              :options="typeOptions"
              :disable-branch-nodes="true"
              placeholder="选择资产类型"
              @select="selcetType"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购置日期">
            <el-date-picker
              v-model="formItem.purchaseDate"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              align="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品牌" prop="brand">
            <el-input v-model="formItem.brand" placeholder="品牌" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号" prop="specifications">
            <el-input v-model="formItem.specifications" placeholder="规格型号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="SN码" prop="sn">
            <el-input v-model="formItem.serialnumber" placeholder="请输入SN码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数量" prop="amount">
            <el-input-number v-model="formItem.amount" :step="1" :max="1000000000" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用期限" prop="usePeriod">
            <el-input v-model="formItem.usePeriod" placeholder="请输入使用期限" :maxlength="255" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计量单位" prop="measureUnit">
            <el-input v-model="formItem.measureUnit" placeholder="请输入计量单位" :maxlength="255" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="金额" prop="money">
            <el-input-number v-model="formItem.money" :precision="2" :step="1" :max="1000000000" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="使用部门" prop="managementOrgCode">
            <treeselect
              v-model="formItem.managementOrgCode"
              :multiple="false"
              :options="availableOganizations"
              placeholder="选择使用部门"
              :disable-branch-nodes="true"
              @input="inputOrg"
              @select="selectOrg"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用人" prop="managementUserCode">
            <el-select v-model="formItem.managementUserCode" class="select_input" filterable clearable placeholder="请选择使用人" @change="onChangeUser">
              <el-option v-for="(item) in orgUsers" :key="item.username" :label="item.name" :value="item.username" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="维保开始">
            <el-date-picker
              v-model="formItem.maintenanceStartTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              align="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维保结束">
            <el-date-picker
              v-model="formItem.maintenanceEndTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              align="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="用途" prop="purpose">
            <el-input v-model="formItem.purpose" :maxlength="255" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="note">
            <el-input v-model="formItem.note" placeholder="请输入备注" :maxlength="255" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { tree } from '@neu/dcam-ui/api/assetType'
import treeselect from '@neu/biz-core/components/TreeSelect'
import { clone } from '@neu/biz-core/utils/utils'
import * as organizations from '@neu/auth-ui/api/organization'
import { list as listUser } from '@neu/auth-ui/api/user'

const formItem = {
  id: '',
  name: '',
  brand: '',
  specifications: '',
  serialnumber: '',
  purchaseDate: '',
  maintenanceStartTime: '',
  maintenanceEndTime: '',
  bigTypeName: '',
  bigTypeCode: '',
  middleTypeName: '',
  middleTypeCode: '',
  smallTypeName: '',
  smallTypeCode: '',
  measureUnit: '',
  amount: 1,
  usePeriod: '',
  card: '',
  note: '',
  managementOrgName: '',
  managementOrgCode: '',
  managementUserCode: '',
  managementUserName: '',
  money: 0.00,
  purpose: ''
}

export default {
  name: 'FixedAssetTypeEditForm',
  components: {
    treeselect
  },
  props: {
    // 根据id可判断是新建还是更新
    installAsset: {
      required: true,
      type: Object,
      default: function() {
        return {
          ...formItem
        }
      }
    }
  },
  data() {
    return {
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '资产名称不能为空', trigger: 'blur' }
        ],
        assetTypeCode: [
          { required: true, message: '资产分类不能为空', trigger: 'blur' }
        ]
      },
      formItem: {
        ...formItem
      },
      modal: true,
      /** 资产类型树 */
      typeOptions: [],
      /** 使用部门 */
      availableOganizations: [],
      /** 使用人集合 */
      orgUsers: [],
      /** 是否初始化 */
      isUpdateInit: true
    }
  },
  watch: {
  },
  created() {
    this.formItem = clone(this.installAsset)
    tree('sl').then(response => {
      const result = response.data
      this.typeOptions = result
    })
    organizations.tree().then(response => {
      this.availableOganizations = [response.data]
    })
  },
  methods: {
    save() {
      this.$emit('change', clone(this.formItem))
    },
    selcetType(value) {
      this.formItem.assetTypeName = value.title
    },
    /** 组织机构赋值 */
    selectOrg(value) {
      this.formItem.managementOrgName = value.title || ''
    },
    inputOrg(value) {
      // if (this.isUpdateInit) {
      //   this.orgUsers = []
      //   this.formItem.managementUserCode = ''
      //   this.formItem.managementUserName = ''
      // }

      // this.isUpdateInit = true
      if (!value) {
        this.formItem.managementOrgName = value || ''
      }
      // 查询部门下面的人员
      listUser({ s_orgCode: value }).then(res => {
        this.orgUsers = res.data
      })
    },
    onChangeUser(v) {
      const user = this.orgUsers.find(it => it.username === v)
      if (user) {
        this.formItem.managementUserName = user.name
      }
    }
  }
}
</script>
